<template>
  <CustomTableCard 
    footer
    temporary 
    actions 
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    :width="1000"
    :showDrawer.sync="showDrawer" 
    @on-page="getList" 
    @cancel="handleCancel"
    @ok="handleOk"
    :title="baseInfo.id ? '编辑' : '添加'">
    <div slot="header">
      <v-row>
        <v-col cols="1">
          <v-select
            v-model="queryParams.status"
            :items="[{name: '激活', value: 1}, {name: '锁定', value: 2}, {name: '全部', value: ''}]"
            label="状态"
            item-text="name"
            item-value="value"
            dense
            outlined
            hide-details
            @change="getList(1)"
          ></v-select>
        </v-col>
        <v-col cols="2">
          <v-text-field
            v-model="queryParams.keyword"
            label="关键字搜索"
            outlined
            dense
            hide-details
            clearable
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3" @click="getList(1)">{{ $t('actions.search') }}</v-btn>
        </v-col>
        <v-col cols="1" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">{{ $t('actions.add') }}</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      ref="table"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      stripe
      border
      fit
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column :label="$t('i18nBaseInfo.information.id')" fixed type="index" sortable="custom" align="center" prop="id" width="60"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.name')" fixed show-overflow-tooltip prop="name" width="180" align="center"></el-table-column>
      <!-- <el-table-column :label="$t('i18nBaseInfo.information.infoType')" prop="info_type_name"  width="140px" align="center"></el-table-column> -->
      <!-- <el-table-column :label="$t('i18nBaseInfo.information.pic')" width="110px" align="center">
        <template slot-scope="scope">
          <viewer :images="scope.row.imagesArr">
            <div class="d-flex" style="overflow-x: auto;">
              <div v-for="item in scope.row.imagesArr" :key="item.url" style="margin-right: 10px;width: 80px;" >
                <v-avatar tile>
                  <img :src="item.url">
                </v-avatar>
              </div>
            </div>
          </viewer>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('i18nBaseInfo.information.website')" prop="url" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.company')" show-overflow-tooltip prop="company" min-width="220"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.city')" prop="city_name" width="240px" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.address')" prop="address" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.contacts')" prop="contact" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.telePhone')" prop="telphone" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.fax')" prop="fax" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.email')" prop="email" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.price')" prop="" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.valuationMethod')" prop="money_type_name" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.payType')" prop="pay_type_name" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.files')" width="180" align="center">
        <template slot-scope="{row}">
          <div v-for="item in row.filesArr" :key="item.url">
            <a class="link-type" :href="item.url" :download="item.name">{{item.name}}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.remarks')" prop="remark" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.creator')" prop="created_user_name" width="180" align="center"></el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.modifier')" prop="updated_user_name" width="180" align="center"></el-table-column>
      <el-table-column
        fixed="right"
        prop="status"
        :label="$t('i18nBaseInfo.information.status')"
        width="140">
        <template slot-scope="{ row }">
          <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已激活' : '已锁定'" @change="setStatus(row)"></v-switch>
        </template>
      </el-table-column>
      <el-table-column :label="$t('i18nBaseInfo.information.actions')" fixed="right" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <v-btn small color="info" @click="handleEdit(row)">{{ $t('actions.edit') }}</v-btn>
          <!-- <v-btn v-if="row.status == 2" small color="success" @click="setStatus(row, 1)">{{ $t('actions.open') }}</v-btn> -->
          <!-- <v-btn v-if="row.status == 1" small color="warning" @click="setStatus(row, 2)">{{ $t('actions.close') }}</v-btn> -->
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <v-btn small color="success" :disabled="!multipleSelection.length" class="mr-2" @click="setStatusAll(1)">{{ $t('actions.open') }}</v-btn>
      <v-btn small color="warning" :disabled="!multipleSelection.length" @click="setStatusAll(2)">{{ $t('actions.close') }}</v-btn>
    </div>
    <section slot="drawer" class="pa-3">
      <v-form
        ref="form"
        :lazy-validation="false"
      >
        <v-card class="mb-4">
          <v-card-title>基础信息</v-card-title>
          <v-divider />
          <v-container class="pb-0">
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;"><small class="red--text mr-1">({{$t('other.required')}})</small>景点名称：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field
                      v-model="baseInfo.name"
                      :rules="[rules.required]"
                      required
                      >
                    </v-text-field>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">所在城市：</label>
                  <div class="pr-4 flex-grow-1">
                    <dict-select v-model="baseInfo.city_id" type="city"></dict-select>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">公司名称：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.company"></v-text-field>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">网址：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.url"></v-text-field>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">联系人：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.contact"></v-text-field>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">联系电话：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.telphone"></v-text-field>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">详细地址：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.address"></v-text-field>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">结算方式：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-select :items="['公司支付', '泰铢·THB']"></v-select>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">邮箱：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.email"></v-text-field>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">传真：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.fax"></v-text-field>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">简介：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-textarea
                      v-model="baseInfo.intro"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </div>
                </v-row>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
        <v-card>
          <v-card-title class="d-flex align-center justify-space-between">
            <span class="mr-8">产品价格</span>
            <v-btn color="primary" @click="handleAddPrice">{{$t('actions.add')}}</v-btn>
          </v-card-title>
          <el-table
            :data="priceDate"
            border
            >
            <el-table-column
              label="规格类型"
              width="220">
              <template slot="header">
                <span class="mr-1">规格类型</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.name"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="销售价"
              width="180">
              <template slot="header">
                <span class="mr-1">销售价</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model.number="row.price"
                  outlined
                  single-line
                  hide-details
                  dense
                  type="number"
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="成本价"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model.number="row.cost"
                  outlined
                  single-line
                  hide-details
                  dense
                  type="number"
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.remark"
                  outlined
                  single-line
                  hide-details
                  dense
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="{ $index, row }">
                <v-btn color="warning" small @click="handleDeletePriceData($index, row)">{{$t('actions.delete')}}</v-btn>
              </template>
            </el-table-column>
          </el-table>
        </v-card>
      </v-form>
    </section>
  </CustomTableCard>
</template>

<script>
import mixin from './mixin'
import { mapMutations } from 'vuex'
import { getScenicList, setStatus, addScenic, editScenic } from '@/api/scenic'

export default {
  name: 'scenicManage',
  mixins: [mixin],
  created() {
    this.cloneFormData()
    this.getList()
    this.__inited__ = false
  },
  activated() {
    if(this.__inited__) {
      this.getList()
    }
  },
  deactivated() {
    this.__inited__ = true
  },
  data() {
    return {
      page: 1,
      showDrawer: false,
      queryParams: {
        page: 1,
        limit: 10,
        status: '',
        info_type_id: undefined,
        city_id: undefined,
        keyword: ''
      },
      multipleSelection: [],
      tableData: [],
      total: 0,

      baseInfo: {
        id: undefined,
        name: '',
        intro: '',
        info_type_id: undefined,
        info_type_name: '',
        pay_type_id: undefined,
        pay_type_name: '',
        city_id: undefined,
        city_name: '',
        company: '',
        address: '',
        remark: '',
        url: '',
        level: '',
        fax: '',
        telphone: '',
        contact: '',
        email: '',
        filesArr: [],
        imagesArr: [],
        money_type_id: undefined,
        money_type_name: '',
        detail: []
      },
      priceDate: [],

      rules: {
        required: value => !!value || 'required',
      },
    }
  },

  methods: {
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      getScenicList(this.queryParams).then(response => {
        this.total = response.data.count
        this.tableData = response.data.data
      }).finally(() => {

      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCancel() {
      this.resetForm()
    },
    // 克隆数据 用于重置数据使用
    cloneFormData() {
      this._baseInfo = Object.assign({}, this.baseInfo)
    },
    // 重置表达数据和验证
    resetForm () {
      Object.assign(this.baseInfo, this._baseInfo)
      this.$refs.form.resetValidation()
    },
    handleOk() {
      if(this.$refs.form.validate()) {
        if(this.baseInfo.id) {
          this.baseInfo.detail = this.priceDate
          editScenic(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList()
            this.showDrawer = false
          })
        } else {
          this.baseInfo.detail = this.priceDate
          addScenic(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList(1)
            this.showDrawer = false
          })
        }
      }
    },
    handleEdit(row) {
      this.showDrawer = true
      Object.assign(this.baseInfo, row)
      this.priceDate = row.detail ? row.detail.map(item => {
        return {
          ...item
        }
      }) : []
    },
    setStatusAll(status) {
      let data = this.multipleSelection.map(item => {
        return {
          id: item.id,
          status: status
        }
      })
      this.updateStatus({listData: data})
    },
    setStatus(row, status) {
      status = status ? status : (row.status == 1 ? 2 : 1)
      this.updateStatus({listData: [{id: row.id, status: status}]})
    },
    updateStatus(params) {
      setStatus(params).then(() => {
        this.$message({
          type: 'success',
          message: 'success!'
        })
        this.getList()
      })
    },
    handleAddPrice() {
      this.priceDate.push({
        name: '',
        price: '',
        cost: '',
        remark: ''
      })
    },
    handleDeletePriceData(index, row) {
      this.priceDate.splice(index, 1)
    }
  }
}
</script>
